<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta charset="UTF-8" />
	<script type="text/javascript" src="resources/js/jquery/jquery-plugins.js?ln=primefaces"></script>

	<!-- TEMPLATE -->

	<meta name="description"
		content="Clean Responsive One Page V-card by Benaissa Ghrib" />
	<meta name="keywords"
		content="HTML, CSS, JavaScript, Template, Minimal, responsive one page template, PHP, One page template" />
	<meta name="author" content="Benaissa Ghrib" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1" />
	<link rel="stylesheet" href="resources/css/main.css" />
	<link rel="stylesheet"
		href="resources/fancybox/jquery.fancybox-1.3.4.css" />
	<link rel="stylesheet" href="resources/css/flexslider.css" />
	<link rel="stylesheet" href="resources/css/fontello.css" />
	<!--[if IE 7]>
		    <link rel="stylesheet" href="resources/css/fontello-ie7.css">
		<![endif]-->
	<link rel="stylesheet" type="text/css"
		href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic" />

	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

	<!--[if lt IE 8]>
		<style>
		/* For IE < 8 (trigger hasLayout) */
		.clearfix {
		    zoom:1;
		}
		</style>
		<![endif]-->

	<!-- /TEMPLATE -->

	<title>Online Store Retailer</title>
</h:head>

<h:body>

	<!-- TEMPLATE -->

	<!--Wrapper-->
	<div id="wrapper">
		<!--Main header-->
		<section id="header">
			<div id="innerHeader">
				<!--Header-->
				<header class="clearfix">
					<!--Logo-->
					<div id="logo">
						<h1>
							<a href="#wrapper">Online Store <span>Retailer</span></a>
						</h1>
					</div>
					<!--End logo-->
					<h:form>
						<p style="width: 100%; text-align: right;">
							Hola <b><h:outputText value="#{sessionScope.user.nombre}"></h:outputText></b>
							| <a href="carritoCompras.xhtml" title="Ver carrito de compras">Ver
								carrito</a> |
							<p:commandLink value="Cerrar sesión"
								action="#{AutenticacionBean.cerrarSesion}" ajax="false"></p:commandLink>
						</p>
					</h:form>
				</header>
				<!--End header-->
			</div>

			<p:menubar model="#{MenuBean.model}" id="OSRMenu" />

			<!--End inner header-->
		</section>
		<!--End main header-->

		<!--Main content-->
		<div id="mainContent" class="clearfix">

			<!--Slider-->
			<div id="slider">
				<div id="slideShow" class="flexslider">
					<ul class="slides">
						<li><img src="resources/images/sliderImages/1.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/2.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/3.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/4.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/5.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/6.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/7.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/8.jpg" alt="" /></li>
						<li><img src="resources/images/sliderImages/9.jpg" alt="" /></li>
					</ul>
				</div>
			</div>
			<!--End slider-->

			<!--Inner Content-->
			<div id="innerContent" class="clearfix">
				<!--Anota-->
				<div id="anota">
					<div>
						<h1>Online Store Retailer</h1>
						<h2>Una tienda en linea con fines académicos</h2>
					</div>
					<div class="arrAnota"></div>
				</div>
				<!--End anota-->

				<!--Contact-->
				<section id="contact" class="clearfix">
					<!--Title-->
					<div class="title">
						<div>
							<h1>Productos</h1>
							<h4>Últimos productos</h4>
						</div>
						<div class="titleArrow"></div>
					</div>
					<!--End title-->

					<!--Inner contact-->
					<div id="innerContact" class="clearfix"> 
					
						<b><h:outputText value="#{HomeBackingBean.mensaje}"></h:outputText></b>

					<!-- 	<c:if test="#{HomeBackingBean.conPromocion.size() > 0}">--> 
						 
							<h1>Productos con promoción</h1>
	
							<br />
							
							<p:dataTable scrollable="true" var="producto"
								value="#{HomeBackingBean.conPromocion}">
								<p:column headerText="Nombre">
									<h:outputText value="#{producto.nombre}" />
								</p:column>
								<p:column headerText="Descripcion">
									<h:outputText value="#{producto.descripcion}" />
								</p:column>
								<p:column headerText="Precio">
									<h:outputText value="#{HomeBackingBean.formatearMoneda(producto.preciobase)}" />
								</p:column>
								<p:column>
									<p:growl id="notificacion1" showDetail="true" sticky="false" />
									<p:commandButton action="#{CarritoBean.agregarCar(producto)}" value="Agregar al carrito" update="notificacion1"></p:commandButton>
								</p:column>
							</p:dataTable>
							
							<br />
							<br />
						
						<!-- </c:if>-->
						
					<!-- 	<c:if test="#{HomeBackingBean.ultimos.size() > 0}"> --> 
							<h1>Últimos productos</h1>
	
							<br />
	
							<p:dataTable scrollable="true" var="producto"
								value="#{HomeBackingBean.ultimos}">
								<p:column headerText="Nombre">
									<h:outputText value="#{producto.nombre}" />
								</p:column>
								<p:column headerText="Descripcion">
									<h:outputText value="#{producto.descripcion}" />
								</p:column>
								<p:column headerText="Precio">
									<h:outputText value="#{HomeBackingBean.formatearMoneda(producto.preciobase)}" />
								</p:column>
								<p:column>
									<p:growl id="notificacion2" showDetail="true" sticky="false" />
									<p:commandButton action="#{CarritoBean.agregarCar(producto)}" value="Agregar al carrito" update="notificacion2"></p:commandButton>
								</p:column>
							</p:dataTable>
						
						<!-- </c:if> -->

					</div>
					<!--Inner contact-->
				</section>
				<!--End contact-->


				<!--Footer-->
				<section id="footer">
					<div class="innerFooter">
						<p>Junio 2013. Online Store Retailer</p>
					</div>
				</section>
				<!--End footer -->
			</div>


			<!--End inner Content-->
		</div>
		<!--End main content-->

	</div>
	<!--End wrapper-->

	<!-- /TEMPLATE -->
	
	<script src="resources/js/jquery.flexslider-min.js"></script>
	<script>
		$('#slideShow').flexslider({
        	animation: "fade"
      	});
	</script>


</h:body>
</html>